<template>
  <div class="search-results">
    <el-card
      v-for="(result, index) in results"
      :key="index"
      class="result-card"
      shadow="hover"
    >
      <div class="result-content">
        <h4>{{ result.nam }}</h4>
        <p class="result-desc">{{ result.note }}</p>
        <el-button
            type="text"
            @click="handleClick(result)"
          >
            查看详情
          </el-button>
      </div>
    </el-card>
    <el-empty v-if="results.length === 0" description="没有找到相关结果" />
  </div>
</template>


  
<script>
import { useRouter } from "vue-router";
export default {
  name: "SearchResults",
  props: {
    results: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const router = useRouter();
    const handleClick = (result) => {
      // 根据 result 类型跳转到不同的界面
      if (result.type === "用户搜索信息") {
        router.push({
        path: '/person',
        query: { userId: result.id }, // 将用户 ID 作为查询参数传递
        });
      } else if (result.type === "提问箱搜索信息") {
        router.push({
        path: '/question',
        query: { questionId: result.id }, 
        });
      } 
    };
    return {
      handleClick,
    };
  },
};
</script>
  
<style scoped>
.search-results {
  max-width: 800px;
  margin: 0 auto;
  height: 87%;
  overflow-y: auto;
}


.result-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 10px;
}

.result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.result-content h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.result-content .result-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}
</style>

  